// common/index.js
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useScreenSize() {
  // 被组合式函数封装和管理的状态
  const screenW = ref(0)
  const screenH = ref(0)
  const isMini = ref(false)

  // 组合式函数可以随时更改其状态。
  function update(event) {
    screenW.value = document.documentElement.clientWidth;
    screenH.value = document.documentElement.clientHeight;
    isMini.value = screenW.value > 1000 ? false : true
    console.log('屏幕宽度', screenW.value, screenH.value)
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => {
    update()
    window.addEventListener('resize', update, true)
  })
  onUnmounted(() => window.removeEventListener('resize', update))

  // 通过返回值暴露所管理的状态
  return { screenW, screenH, isMini }
}